<template>
	<view style="width: 100%;">
		<view class="content">
			<view class="content-title">
				<view class="title">{{detail.titile}}</view> 
				<view class="time">{{detail.sendTime}}</view>
			</view>
			<view class="content-text" v-html="detail.msgContent"></view>
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				detail: [], //详情
			}
		},
		
		onLoad(e) {
			let self = this
			//通知/消息详情
			self.$api.fSysAnnountCementQueryById({
				id: e.id
			}).then((res) => {
				self.detail = res.data.result
				console.log(self.detail);
				self.detail.msgContent = self.formatRichText(self.detail.msgContent)
				if(self.detail.delFlag == 0) {
					//通知/消息设为已读 
					self.$api.fSysAnnountCementEditByAnntIdAndUserId({
						anntId: self.detail.id
					}).then((res) => {
						console.log(res);
						uni.$emit('message_info')
					}).catch(e=>{
						console.log(e);
					})
				}
			}).catch(e=>{
				console.log(e);
			})
		},
		methods: {
			formatRichText (html) { //控制小程序中图片大小
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
				  match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				  match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				  match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				  return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
				  match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				  return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
	}
</script>

<style scoped>
	
.content {
	margin-left: 28rpx;
	margin-right: 28rpx;
	border-top: 2rpx solid #eaebec;
	border-radius: 8rpx;
	padding: 16rpx;
	
}

.content-title {
	justify-content: space-between;
	align-items: center;
}
	
.title {
	color: rgba(51, 51, 51, 1);
	font-size: 32rpx;
	
}

.time {
	color: rgba(108, 108, 108, 1);
	font-size: 24rpx;
	margin-top: 4rpx;
} 

.content-text {
	word-break: break-all;
	word-wrap: break-word;
	margin-top: 24rpx;
	margin-bottom: 24rpx;
}

.content-img {
	width: 100%;
}

.content-img>>>p {
	display: inline-block;
	width: 100%;
}

.content-img>>>p img {
	width: 100%;
	height: 100%;
}

</style>
